<template>
  <div style="padding: 15px">
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>
    <el-tree ref="tree" :data="subjects" :props="defaultProps" :default-expand-all="expandFlag" :filter-node-method="filterNode" @node-click="handleNodeClick"/>
  </div>
</template>
<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      subjects: [],
      expandFlag: true,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      filterText: ''
    }
  },
  watch: { // 监听data中的某个数据，如果数据的值改变则回调下面的方法并传入改变后的值
    filterText(val) {
      // filter :el-tree 的过滤方法，可以对el-tree的数据进行筛选
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getSubjects()
  }, methods: {
    getSubjects() {
      subjectApi.listNestedSubjects().then(r => {
        console.log(r.data)
        this.subjects = r.data.items
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    filterNode(value, data) { // filterNode在 filterText值改变时 触发调用，vue的el-tree会使用每个节点调用filterNode方法并传入 value(代表filterText最新的值)
      // data 代表当前的节点对象
      if (!value) return true
      return data.title.toUpperCase().indexOf(value.toUpperCase()) !== -1
    }
  }
}
</script>
